<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 800px;
        }
        .register{
            margin: 60px;
            width: 600px;
        }
        .step-line{
            margin: 0px;
            padding: 0px;
            list-style: none;
            display: flex;
            flex-flow: row nowrap;
            counter-reset: step;
        }
        .step-line>li{
            width: auto;
            height: 30px;
            line-height: 30px;
            position: relative;
            padding-left: 10px;
            background-color: white;
        }
        .step-line>li:not(:last-child){
            margin-right: 100px;
        }
        .step-line>li::before{
            counter-increment: step;
            content: counter(step);
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #cccccc;
            text-align: center;
            border-radius: 50%;
            color: #666666;
        }
        .step-line>li:not(:last-child):after{
            display: block;
            content: "";
            width: 100%;
            border-bottom: 3px dashed #cccccc;
            position: absolute;
            top: 50%;
            transform: translateX(100%);
        }
        .step-line>li.active{
            color: brown;
        }
        .step-line>li.active::before{
            color: white;
            background-color: brown;
        }
        .step-line>li.active::after{
            border-color: brown;
        }
        .register .box{
            margin-top: 20px;
            border: 1px solid #cccccc;
            display: flex;
            flex-flow: column nowrap;
        }
        .register .box .header{
            min-height: 50px;
            line-height: 3;
            border-bottom: 1px solid #cccccc;
            font-size: 18px;
            text-align: center;
            background-color: brown;
            color: white;
            font-weight: bold;
            letter-spacing: 6px;
        }
        .register .box .body{
            min-height: 200px;
            padding: 30px 60px;
            box-sizing: border-box;
        }
        .register .box .body .tip{
           text-align: center;
           font-size: 24px;
           color: green;
        }
        .register .box .body>label{
            display: flex;
            flex-flow: row nowrap;
            font-size: 18px;
            height: 40px;
            margin-bottom: 30px;
            align-items: center;
        }
        .register .box .body>label>span{
            width: 100px;
            text-align: justify;
            text-align-last: justify;
            margin-right: 20px;
        }
        .register .box .body>label>input[type=text]{
           flex-grow: 1;
           height: 100%;
           box-sizing: border-box;
           padding: 0px 10px;
           font-size: 16px;
        }
        .register .box .footer{
            min-height: 50px;
            border-top: 1px solid #cccccc;
            line-height: 3;
            text-align: center;
        }
        .register .box .footer>input[type=button]{
            color: white;
            background-color: rgba(165, 42, 42, 1);
            border: none;
            outline: none;
            padding: 8px 12px;
            line-height: 1;
            cursor: pointer;
        }
        .register .box .footer>input[type=button]:active{
            filter:grayscale(0.5)
        }

    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="register">
            <ul class="step-line">
                <li :class=" { active:step>=1  } ">账号信息</li>
                <li :class=" { active:step>=2  } ">手机绑定</li>
                <li :class=" { active:step>=3  } ">注册完成</li>
            </ul>
            <!-- 
                页面元素的 动态删除和动态添加，为尽可能提供程序的运行速度
                vue会尽最大可能复用页面中将要被删除的和已经存在的元素
                +> 因为复用问题，v-if 执行过程中 数据可能也会被复用

                辅助属性：key 描述vue项目构成的属性在创建删除时不被复用
                    key 必须保证在整个页面中唯一

                辅助标签：<template>  为vue页面提供 无父元素标签的统一操作 结构标签
                    特性，不被浏览器解析，不具有标签功能，不会影响标签层级关系
            -->
            <div class="box">
                <div class="header">账号信息</div>
                <div class="body">

                    <template v-if="step==1">
                        <label key="a">
                            <span>用户名</span>
                            <input type="text" value="">
                        </label>
                        <label  :key=" 'b' ">
                            <span>密码</span>
                            <input type="text" value="">
                        </label>
                    </template>

                    <template  v-if="step==2">
                        <label :key=" key ">
                            <span>手机号码</span>
                            <input type="text" value="">
                        </label>
                        <label :key=" Math.random() ">
                            <span>邮箱</span>
                            <input type="text" value="">
                        </label>
                    </template>

                    <p class="tip" v-show="step==3">注册完成</p>
                </div>
                <div class="footer">
                    <input v-show="step>1" type="button" value="上一步" @click=" stepChange(-1) ">
                    <input v-show="step<3" type="button" value="下一步" @click=" stepChange(1) ">
                    <input v-show="step==3" type="button" value="完成">
                </div>
            </div>
        </div>
        <br><hr><br>
        <ul>
            <!--
                v-for 使用 key 构成禁止复用条件时，使用 index 下标作为取值 ，和没有定义 key 效果一直
                v-for构建时 key 只能取值和数据有关的唯一值 - 该值基本为 数据元素的 ID
                     或者可以保证唯一的数据
             -->
            <li v-for="(item, index) in cityList" :key="item">
                <input type="checkbox">
                {{ item }}
            </li>
        </ul>
        <input type="button" value="末尾添加元素" @click=" cityList.push( Math.random() ) ">
        <input type="button" value="首位添加元素" @click=" cityList.unshift( Math.random() ) ">
        <br><hr><br>
        <template v-for="(item, index) in cityList">
            <p style="color:red">{{ item }}</p>
            <p style="color:green">{{ item }}</p>
        </template>


    </div>
</body>
<script>
    
    new Vue({
        el:"#app",
        data:{
            step:1,
            key:"ccc",
            cityList: ["上海", "南京", "镇江", "合肥", "石家庄"]
        },
        methods: {
            stepChange(s){
                let temp = this.step + s;
                if(temp>=1&&temp<=3){
                    this.step = temp; 
                }
            }
        },
    })
</script>
</html>